<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .table-container{
      width: 80%;
      margin: 20px auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    table{
      border: 1px solid #eeeeee;
      border-collapse: collapse;
    }
    th, td{
      padding: 20px 30px;
      border: 1px solid #eeeeee;
    }
    th{
      background: #ebe8e8;
    }
    td{
      background: #f8f6f6;
    }
    .amount-span{
      margin: 0 5px;
    }
  </style>
</head>
<body>
  <script src="./react/react.development.js"></script>
  <script src="./react/react-dom.development.js"></script>
  <script src="./react/babel.min.js"></script>
  <script src="./utils.js"></script>

  <div id="app"></div>

  <script type="text/babel">
    class Table extends React.Component {
      constructor(){
        super()
        this.state = {
          booksList: [
            {
              name: '数据结构',
              publish: '2020-12-14',
              amount: 3,
              price: 50
            },
            {
              name: '操作系统',
              publish: '2020-12-12',
              amount: 1,
              price: 32
            },
            {
              name: '算法导论',
              publish: '2020-12-14',
              amount: 1,
              price: 65
            },
            {
              name: '老人与海',
              publish: '2020-12-14',
              amount: 2,
              price: 54
            }
          ],
          totalCount: 0
        }
      }
      renderBooks(){
        return (
          <div>
            <div className="table-container">
              <table className="table">
                <thead>
                  <tr>
                    <th>序号</th>  
                    <th>书名</th>
                    <th>出版日期</th>
                    <th>数量</th>
                    <th>价格</th>
                    <th>操作</th>  
                  </tr>
                </thead>  
                <tbody>
                  {
                    this.state.booksList.map((item, index) => {
                      return (
                        <tr>
                          <td>{index+1}</td>  
                          <td>{item.name}</td>
                          <td>{item.publish}</td>
                          <td>
                            <button disabled={item.amount <= 1} onClick={e => {this.setAmount(index,-1)}}>-</button>  
                            <span className="amount-span">{item.amount}</span>
                            <button onClick={e => {this.setAmount(index,+1)}}>+</button>
                          </td>
                          <td>{formatPrice(item.price)}</td>
                          <td>
                            <button onClick={()=>{this.delete(index)}}>删除</button>  
                          </td>
                        </tr>
                      )
                    })
                  }  
                </tbody>
              </table>
              <h2>总金额：{this.getTotalPrice()}</h2>
            </div>  
          </div>
        )
      }
      renderEmpty(){
        return (
          <div className="table-container">
            <table className="table">
              <thead>
                <tr>
                  <th>序号</th>  
                  <th>书名</th>
                  <th>出版日期</th>
                  <th>数量</th>
                  <th>价格</th>
                  <th>操作</th>  
                </tr>
              </thead>
            </table>
            <div style={{"text-align": "center"}}>暂无数据</div>
          </div>
        )
      }
      render(){
        // 分开渲染
        return this.state.booksList.length ? this.renderBooks() : this.renderEmpty()
      }
      setAmount(index, value){
        let newBooks = [...this.state.booksList]
        newBooks[index].amount += value
        this.setState({
          booksList: newBooks
        })
      }
      getTotalPrice(){
        // 回调函数的参数:
        // 参数一: 上一次回调函数的结果(第一次没有上一次函数的回调函数的结果, 使用初始化值)
        const totalPrice = this.state.booksList.reduce((preValue, item)=>{
          return preValue + item.price * item.amount
        }, 0)
        return formatPrice(totalPrice)
      }
      delete(index){
        console.log(index)
        this.setState({
          booksList: this.state.booksList.filter((item,indey) => index != indey)
        })
      }
    }
    ReactDOM.render(<Table/>, document.getElementById('app'))
  </script>
</body>
</html>